<template>
	<el-dialog title="线索转移" :visible.sync="dialogVis" :close-on-click-modal="false" width="700px" center @close="cancelClick">
		<div class="other-page">
			<div class="search-box flex f-mi f-be">
				<div>
					<el-select v-model="branchId" placeholder="请选择">
						<el-option v-for="item in depList" :key="item.branch_id" :label="item.branch_title" :value="item.branch_id" @click="departChange(item)">
						</el-option>
					</el-select>
				</div>
				<div>
					<el-input placeholder="请输入内容" prefix-icon="el-icon-search" v-model="keywords"></el-input>
				</div>
				<div class="flex f-mi">
					<el-button class="btn bg-blue" @click="queryClick">查询</el-button>
                    <el-button class="btn bg-gray" @click="resetClick">重置</el-button>
				</div>
			</div>
			<div class="other-list" v-if="dataList.length > 0">
				<div class="other-box f-be" :class="activeIndex === item.uid ? 'active-bor':''" v-for="(item,index) in dataList" :key="index" @click="activeClick(item)">
					<div class="flex left">
						<div class="pic">
							<img :src="item.profile"/>
						</div>
						<div class="pad-L1">
							<div style="margin-bottom: 5rpx;">
								<span class="fs-16">{{item.name}}</span>
								<span class="t-eight">（{{item.branch}}）</span>
							</div>
							<div class="">
								<img style="width: 22rpx;" src="../assets/images/phone-icon.png" />
								<span style="color: #2A82E4;">{{item.phone}}</span>
							</div>
						</div>
					</div>
					<div class="right">
						<div class="fs-13 fw-7" style="color: #2967E3;">
							{{item.clue_total}}
						</div>
						<div class="t-eight fs-13">
							跟单
						</div>
					</div>
				</div>
			</div>
			<div class="t-cen pad-T1 pad-B1" v-else>
				<img class="w-90" src="../assets/images/no-data.png" alt="">
				<p>暂无数据</p>
			</div>
			<div class="page" v-if="total >= 10">
				<el-pagination
					background
					@current-change="handleCurrentChange"
					:current-page.sync="currentPage"
					:page-size="pageSize"
					layout="prev,pager,next,total"
					:total="total">
				</el-pagination>
			</div>
			<div class="btn-box" v-if="dataList.length > 0">
				<el-button class="btn gray" type="primary" @click="cancelClick">取消</el-button>
				<el-button class="btn b-bg" type="primary" @click="sureClick">确认</el-button>
			</div>
		</div>
	</el-dialog>
</template>

<script>
	import {request} from "../assets/js/utils/request";
	export default {
		props: ['isTransfer','depList','buyId'],
		data() {
			return {
				keywords: '',
				dialogVis: false,
				branchId: '',
				activeIndex: '',
				selectUid: '',
				dataList: [],
				currentPage: 1,
				pageSize: 10,
				total: 0,
			}
		},
		mounted() {
			this.getListData()
		},
		methods: {
			resetClick() {
				this.keywords = ''
				this.branchId = ''
				this.getListData()
			},
			queryClick() {
				this.getListData()
			},
			departChange(params) {
				this.branchId = params.branch_id
				this.getListData()
			},
			activeClick(item) {
				this.activeIndex = item.uid
				this.selectUid = item.uid
			},
			// 切换页码
			handleCurrentChange(val) {
				this.currentPage = val
				this.getListData()
			},
			getListData() {
				let getUrl = `/user/lawyer/list?page=${this.currentPage}&keywords=${this.keywords}`
				if(this.branchId) {
					getUrl += `&branch_id=${this.branchId}`
				}
				request({
					url: getUrl,
					method: 'GET'
				}).then(res => {
					if(res.code == 200) {
						this.dataList = res.data.list || []
						this.total = res.data.quantity
					}
				})
			},
			cancelClick() {
				this.dialogVis = false
				this.$emit('transClose')
			},
			sureClick() {
				const formData = new FormData();
				formData.append('buy_id', this.buyId);
				formData.append('to_uid', this.selectUid)
				request({
					url: '/user/clue/shift',
					method: 'POST',
					data: formData
				}).then(res => {
					if(res.code == 200) {
						this.dialogVis = false
						this.$emit('transferSure')
						this.$message({
							message: '成功',
							type: 'success'
						})
					}
				})
			}
		},
		watch: {
			isTransfer(newVal) {
				console.log(this.buyId)
				this.dialogVis = newVal
			}
		}
	}
</script>

<style lang="less" scoped>
	/deep/.el-dialog{
		border-radius: 15px;
	}
	.other-page{
		width: 100%;
		.search-box{
			width: 100%;
			height: 50px;
			margin-bottom: 10px;
			position: relative;
			background: #fff;
			.search-icon{
				position: absolute;
				top: 5px;
				left: 7px;
			}
			.btn{
				padding: 0;
				width: 80px;
				height: 40px;
				border: none;
			}
			.bg-blue{
				color: #ffffff;
				background: #2967E3;
			}
			.bg-gray{
			    color: #000;
			    border: 1px solid #ddd;
			    background: #fff;
			}
		}
		.other-list{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			margin-bottom: 20px;
		}
		.other-box{
			cursor: pointer;
			width: 49%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
			padding: 15px;
			border-radius: 6px;
			background: rgba(255, 255, 255, 1);
			border: 1px solid rgba(229, 229, 229, 1);
			margin-bottom: 8px;
			.right{
				padding-left: 10px;
				.bor-R{
					text-align: center;
					flex: 1;
					border-left: 1px solid #E5E5E5;
				}
			}
			.pic{
				img{
					width: 40px;
					height: 40px;
					border-radius: 50%;
				}
			}
			.more-box{
				position: absolute;
				right: 12px;
				top: 3px;
				img{
					width: 22px;
				}
			}
		}
		.active-bor{
			border-color: #2967E3;
		}
		.btn-box{
			text-align: right;
			.btn{
				font-size: 14px;
				padding: 0;
				color: #fff;
				width: 96px;
				height: 28px;
				text-align: center;
				line-height: 28px;
				border: none;
				border-radius: 25px;
			}
			.b-bg{
				background: #2967E3;
			}
			.l-bg{
				background: #00BAAD;
			}
			.gray{
				background: #A6A6A6;
			}
		}
	}
</style>